<template>
	<view>
		<!-- 轮播 -->
		<view class="lb-banner">
			<u-swiper :list="list6" @change="e => currentNum = e.current" :autoplay="false" :circular="true"
				height="750rpx" radius="0rpx" indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</u-swiper>
		</view>

		<!-- 基本信息 -->
		<view class="lb-info">
      <view class="info-centre-box">
        <view class="info-centre">
          <view class="price">
            <view class="price-title">活动价</view>
            <view class="price-info">
              <text> </text>
              <text>¥</text>
              <text>0.00</text><!--{{newRowData.price || ''}}-->
              <view class="info-foot" style="margin-left: 12rpx;">
                原价￥{{rowData.price || ''}}
              </view>
            </view>
          </view>

        </view>
        <view class="daojishi">
          <view class="daojishitxt">活动倒计时</view>
          <u-count-down
              :time="rowData.shenyu_time"
              format="HH:mm:ss"
              autoStart
              millisecond
              @change="onChange"
          >
            <view class="time">
              <view class="time__custom">
                <text class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
              </view>
              <text class="time__doc">:</text>
              <view class="time__custom">
                <text class="time__custom__item">{{timeData.minutes>10?timeData.minutes:'0'+timeData.minutes}}</text>
              </view>
              <text class="time__doc">:</text>
              <view class="time__custom">
                <text class="time__custom__item">{{timeData.seconds>10?timeData.seconds:'0'+timeData.seconds }}</text>
              </view>
            </view>
          </u-count-down>
        </view>
      </view>
      <view class="infobox">
        <view class="info-top">
          <view class="top-left">
            <text>{{rowData.name || ''}}</text>
            <!-- <text>任洗3件</text> -->
          </view>
          <view class="container">
            <view class="item" v-for="(idata,key) in rowData.rule_json" :key="key">
              邀请<b style="font-size:40rpx">{{key}}</b>人 - 可享 <sapn v-if="idata != 0">{{idata+'折'}}</sapn> <b style="color:red" v-if="idata == 0">免单</b>
            </view>
          </view>

        </view>
        <u-divider text=""></u-divider>
        <view class="zhulidata">已邀请 <span style="color:red">{{rowData.new_user_num}}</span> 人，仅差<span style="color:red">{{Object.keys(rowData.rule_json).pop() - rowData.new_user_num < 0 ? 0 : Object.keys(rowData.rule_json).pop() - rowData.new_user_num}}</span>人即可享受免单</view>
        <u-line-progress :percentage="rowData.new_user_num / Object.keys(rowData.rule_json).pop() * 100" activeColor="#ff0000"></u-line-progress>
        <view class="lb-goods">
          <view class="g-box" v-for="(val,key) in rowData.itemlog" :key="key">
            <view class="g-left">
              <view class="img">
                <image :src="getImgUrl(val.wxuser_avatar)" mode=""></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

		<!-- 富文本 -->
		<view class="lb-content">
			<u-parse :content="rowData.content" :tagStyle="tagStyle"></u-parse>
		</view>
		<!-- 间隔 -->
		<view style="height: 200rpx; width: 100%;">

		</view>

		<!-- 底部 -->
		<view class="lb-foot">
			<view class="foot-left">
				<view class="left-item" @click="goTo('/pages/home/home')">
					<view class="f-icon">
						<image src="/static/icon/home.png" mode=""></image>
					</view>
					<view class="f-label">
						首页
					</view>
				</view>


				<view class="left-item">
					<button open-type="share">
						<view class="f-icon">
							<image src="/static/icon/share.png" mode=""></image>
						</view>
						<view class="f-label">
							邀请助力
						</view>
					</button>
				</view>


			</view>

			<view class="foot-right">
				<view class="f-price" v-if="newRowData.wxuser_id == user_info.id">
          <small>当前折扣价：</small>
					<text>{{newRowData.discount_price || ''}}</text>
				</view>
		    <view v-if="newRowData.wxuser_id == user_info.id">
          <view class="f-btn" @click="clickBuy(newRowData.sys_category)" v-if="newRowData.status == 1">
            去下单
          </view>
          <view class="f-btn" style="background: #999999" v-else>
            已结束
          </view>
        </view>
        <view v-else>
          <view class="f-btn" style="width:300rpx" @click="helpActivity()" v-if="rowData.shenyu_time > 0">
            助力一下
          </view>
          <view class="f-btn" style="background: #999999" v-else>
            已结束
          </view>
        </view>
			</view>
		</view>
		<loginPop></loginPop>
	</view>
</template>

<script>
	import {
    activityInfo,
    helpActivityApi,
		addCarApi,
    xmyAddOrder,
    travelAddOrder,
    beautifyAddOrder
	} from '@/api/apis/wash.js'
	import {
		setImgUrl
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
        timeData: {},
				id: 0,
				currentNum: 0,
				list6: [],
				rowData: "",
				newRowData:'',
				tagStyle: {
					p: 'font-size:24rpx;line-height: 46rpx;color: #999999;',
					span: 'font-size: 20rpx;line-height: 40rpx;color: #999999;',
					img: 'widht:100%'
				},
				content: ``,
				currentHour:'',
			}
		},
		created() {
			var currentDate = new Date();
			this.currentHour = this.setHour(currentDate.getHours());
			this.tasks();
		},
		beforeDestroy() {
			// console.log(5555)
			clearInterval(this.timeoutId);
		},
		//分享
		//onShareAppMessage 分享给朋友
		//onShareTimeline  分享到朋友圈
		// #ifdef MP
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target)
			}
			let that = this;
			let gName = this.rowData.name;
			let img = setImgUrl(this.rowData.cover_image);
			let uid = that.user_info.id;
			return {
				title: gName,
				imageUrl: img,
				path: '/pages/flash-killing-detail/flash-killing-detail?uid=' + uid + '&id=' + that.id,
			}
		},
		onShareTimeline: function(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target)
			}
			let that = this;
			let gName = this.rowData.name;
			let img = setImgUrl(this.cover_image);
			let uid = that.user_info.id;
			return {
				title: gName,
				imageUrl: img,
				path: '/pages/flash-killing-detail/flash-killing-detail?uid=' + uid+ '&id=' + that.id,
			}
		},
		// #endif
		methods: {
      //地址
      getImgUrl(url) {
        return setImgUrl(url);
      },
      onChange(e) {
        this.timeData = e
      },
			//定时任务
			tasks() {
				let _this = this;
				this.intervalId = setInterval(res => {
					// console.log('定时任务执行了')
					var currentDate = new Date();
					_this.currentHour = _this.setHour(currentDate.getHours());
					// console.log(_this.currentHour)
				}, 1000 * 60)
			},
			setHour(hour) {
				if (hour < 10) {
					return '0' + hour + ':00';
				} else {
					return hour + ':00';
				}
			},
      //助力
      helpActivity() {
        let _this = this;
        uni.showLoading({
          title: "提交中",
          mask: true
        });
        helpActivityApi({
          activityId:this.rowData.id
        }).then(res => {
          uni.hideLoading();
          if(res.code == 1){
            _this.getData()
          }
        })
      },
			//购买
			clickBuy(sys_category) {
        debugger
				let _this = this;
				uni.showLoading({
					title: "提交中",
					mask: true
				});
        if(sys_category == 1){
          addCarApi({
            goods_id: this.rowData.goods_id,
            type:3, //免单=3
            activityId:this.rowData.id
          }).then(res => {
            uni.hideLoading();
            if(res.code == 1){
              let car_id = res.data
              setTimeout(() => {
                uni.navigateTo({
                  url: '/pages/xi-hu/clothes-basket/clothes-basket?car_id=' + car_id
                })
              }, 1000)
            }
          })
        }
        else if(sys_category == 2){
          travelAddOrder({
            goods_id: this.rowData.goods_id,
            type:3, //免单=3
            activityId:this.rowData.id
          }).then(res => {
            uni.hideLoading();
            if (res.code == 1) {
              uni.navigateTo({
                url: '/pages/jia-kao/order-payment/order-payment?id=' + res.data
                    .order_id
              })
            }

          })
        }
        else if(sys_category == 3){

        }
        else if(sys_category == 4){
          beautifyAddOrder({
            goods_id: this.rowData.goods_id,
            type:3, //免单=3
            activityId:this.rowData.id
          }).then(res => {
            uni.hideLoading();
            if (res.code == 1) {
              uni.navigateTo({
                url: '/pages/mei-rong/order-payment/order-payment?id=' + res.data
                    .order_id
              })
            }

          })
        }
        else if(sys_category == 5){
          xmyAddOrder({
            goods_id: this.rowData.goods_id,
            type:3, //免单=3
            activityId:this.rowData.id
          }).then(res => {
            uni.hideLoading();
            if (res.code == 1) {
              uni.navigateTo({
                url: '/pages/xmy/order-payment/order-payment?id=' + res.data
                    .order_id
              })
            }

          })
        }

			},
			//跳转
			goTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			getData() {
				uni.showLoading({
					title: '请求中',
					mask: true
				});
        activityInfo({
          activityId: this.id
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.list6 = [];
						let imgArr = res.data.goods_images;
            this.list6.push(setImgUrl(imgArr));
						this.rowData = res.data;
						this.newRowData = res.data;
					}
				})
			}
		},
		onLoad(options) {
			// console.log(options)
			this.id = options.id;
		},
		onShow() {
			this.getData();
		}
	}
</script>

<style lang="scss">
  .lb-goods {
    position: relative;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    justify-content: center;
    flex-wrap: wrap;
  // box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
  //  padding: 0 32rpx 12rpx;


  .g-box {
    margin-right:10rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 14rpx 0;

    .g-left {
      display: flex;
      align-items: center;
      flex: 1;

      .img {
        width: 80rpx;
        height: 80rpx;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
        border-radius: 8rpx;
      }

      .name {
        font-size: $main-font-28;
        font-weight: 400;
        color: $main-font-color;
        padding-left: 24rpx;
        flex: 1;
      }
    }

    .g-right {
      font-size: $main-font-28;
      font-weight: 400;
      color: #F65D40;

      &::before {
        content: '¥';
        font-size: $main-font-24;
      }
    }
  }
}
	button::after {
		border: none;
	}

	button {
		margin: 0;
		padding: 0;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
	}

	button:hover {
		background: none;
	}

	.lb-banner {
		width: 100%;
		height: 750rpx;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(23, 23, 23, 0.1);
		width: 70rpx;
		height: 40rpx;
		border-radius: 24rpx;
		@include flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;

		&__text {
			color: #333333;
			font-size: 12px;
		}
	}

	//基本信息
	.lb-info {
    margin:10rpx;
		background-color: $main-bg-color;
		box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);

    .zhulidata{
      width:100%;
      text-align: center;
      margin-bottom:20rpx;
    }
    .infobox{
      padding:36rpx;
    }
		.info-top {
      display: flex;
      flex-direction: column;
      justify-content: space-between;


			.top-left {
				text {
					font-size: $main-font-28;
					font-weight: bold;
					color: $main-font-color;

					&:nth-of-type(2) {
						font-size: $main-font-24;
						font-weight: 400;
						color: $main-font-color-grey6;
						padding: 12rpx;
					}
				}
			}

			.top-right {
				font-size: $main-font-24;
				font-weight: 400;
				color: $main-font-color-grey6;
			}
		}

    .info-centre-box{
      display: flex;
      background: linear-gradient(133deg, #f97316 0%, #ef4444 100%);
      padding:20rpx;
      border-radius: 10px 10px 0 0;
      .info-centre {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 12rpx 0;

        .price {
          // display: flex;
          // flex-direction: row;
          // align-items: flex-end;

          .price-title{
            width:80rpx;
            background: #fff;
            text-align: center;
            color:#e11111;
            font-size: $main-font-24;
          }
          .price-info{
            display: flex;
            flex-direction: row;
            align-content: center;
            align-items: center;
          }

          text {
            font-size: $main-font-28;
            font-weight: 400;
            color: #fff;

            &:nth-of-type(2) {
              font-size: $main-font-20;
              color: #fff;
              padding: 0 6rpx 0 12rpx;
              font-weight: bold;
            }

            &:nth-of-type(3) {
              font-size: 50rpx;
              color: #fff;
              font-weight: bold;
            }
          }
        }

        .vip-price {
          display: flex;
          flex-direction: row;
          padding-left: 12px;

          image {
            width: 92rpx;
            height: 36rpx;
          }

          text {
            font-size: $main-font-28;
            font-weight: 400;
            color: #7C562D;
            padding-left: 6rpx;
          }
        }
      }
      .daojishi{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-end;
        align-items: center;
        .daojishitxt{
          color:#fff;
          font-size: 30rpx;
        }
        .time {
          @include flex;
          align-items: center;

          &__custom {
            margin-top: 4px;
            width: 22px;
            height: 22px;
            background-color: #e11111;
            border-radius: 4px;
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            justify-content: center;
            align-items: center;

            &__item {
              color: #fff;
              font-size: 12px;
              text-align: center;
            }
          }

          &__doc {
            color: #e11111;
            padding: 0px 4px;
          }

          &__item {
            color: #606266;
            font-size: 15px;
            margin-right: 4px;
          }
        }
      }
    }





		.info-foot {
			font-size: $main-font-20;
			font-weight: bold;
			color: #000;
			text-decoration: line-through;
		}

	}

	//富文本
	.lb-content {
		margin-top: 24rpx;
		background-color: $main-bg-color;
		padding: 24rpx;
		box-sizing: border-box;
	}

	//底部
	.lb-foot {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 164rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -1rpx 0rpx rgba(0, 0, 0, 0.3);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0rpx 30rpx 0;
		box-sizing: border-box;

		.foot-left {
			display: flex;
			flex-direction: row;
			align-items: center;
			// justify-content: space-around;
			width: 45%;
			height: 134rpx;
			padding-left: 40rpx;

			.left-item {
				display: flex;
				flex-direction: column;

				&:nth-of-type(2) {
					padding-left: 72rpx;
				}



				.f-icon {
					width: 48rpx;
					height: 48rpx;
				}

				.f-label {
					padding-top: 8rpx;
					font-size: $main-font-20;
					font-weight: 400;
					color: #171717;
				}
			}
		}


		.foot-right {
			width: 60%;
			height: 134rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;


			.f-price {
				padding-right: 12rpx;
        display: flex;
        flex-direction: column;
				text {
					font-size: $main-font-36;
					font-weight: bold;
					color: #F65D40;
					opacity: 1;

					&:before {
						content: '¥ ';
						font-size: $main-font-20;
						font-weight: 400;
					}
				}
			}

			.f-btn {
				width: 180rpx;
				height: 80rpx;
				border-radius: 44rpx;
				background: linear-gradient(133deg, #F7583F 0%, #F28F4C 100%);
				line-height: 78rpx;
				text-align: center;
				font-size: $main-font-28;
				font-weight: 400;
				color: $main-font-color-white;
			}
		}
	}
	.a_frame2 {
		font-size: $main-font-24;
		color: #F7583F;
		padding: 12rpx 0;
	}
  .container {
    display: flex;
    flex-direction: column;
    .item{
      display: flex;
      align-items: center;
    }
  }
</style>
